import React from 'react';
import { YunxiaoIcon } from '@alife/devops-ui';
import PropTypes from 'prop-types';
import { tools } from 'components/PersonalSettings/components/utils/utils';
import './passwordCheckPanel.scss';
import intl from 'components/PersonalSettings/components/locale';

const prefix = 'password-check-panel';

class PasswordCheckPanel extends React.Component {
  renderHint = (pass, message) => {
    let icon;
    if (pass) {
      icon = (
        <YunxiaoIcon
          type="success-fill"
          className={`${prefix}-content-item-icon ${prefix}-content-item-icon-pass`}
        />
      );
    } else {
      icon = (
        <YunxiaoIcon
          type="a-ziyuan2"
          className={`${prefix}-content-item-icon ${prefix}-content-item-icon-notpass`}
        />
      );
    }
    return (
      <div>
        {icon}
        <span className={`${prefix}-content-item-msg`}>{message}</span>
      </div>
    );
  };

  renderPasswordMinLength = () => {
    const { password, passwordMinLength } = this.props;

    if (!passwordMinLength) {
      return null;
    }

    const pass = tools.checkPasswordMinLength(password, passwordMinLength);
    const message = `${passwordMinLength}${' '}个字符以上`;

    return this.renderHint(pass, message);
  };

  renderPasswordMaxLength = () => {
    const { password, passwordMaxLength } = this.props;

    if (!passwordMaxLength) {
      return null;
    }

    const pass = tools.checkPasswordMaxLength(password, passwordMaxLength);
    const message = `${passwordMaxLength}${' '}个字符以下`;

    return this.renderHint(pass, message);
  };

  renderMinLetters = () => {
    const { password, minLetters } = this.props;

    if (!minLetters) {
      return null;
    }

    const pass =
      tools.checkMinLetters(password, minLetters) ||
      tools.checkMinSpecialCharacters(password, minLetters);
    const message = `至少包含${' '}${minLetters}${' '}个字母或特殊符号`;

    return this.renderHint(pass, message);
  };

  renderMinDigits = () => {
    const { password, minDigits } = this.props;

    if (!minDigits) {
      return null;
    }

    const pass = tools.checkMinDigits(password, minDigits);
    const message = `至少包含${' '}${minDigits}${' '}个数字`;

    return this.renderHint(pass, message);
  };

  render() {
    return (
      <div className={`${prefix}`}>
        <div className={`${prefix}-title`}>{intl.get('password_requirements')}</div>
        <div className={`${prefix}-content`}>
          <div className={`${prefix}-content-item`}>{this.renderPasswordMinLength()}</div>
          <div className={`${prefix}-content-item`}>{this.renderPasswordMaxLength()}</div>
          <div className={`${prefix}-content-item`}>{this.renderMinDigits()}</div>
          <div className={`${prefix}-content-item`}>{this.renderMinLetters()}</div>
        </div>
      </div>
    );
  }
}

PasswordCheckPanel.propTypes = {
  password: PropTypes.string,
  passwordMinLength: PropTypes.number,
  passwordMaxLength: PropTypes.number,
  minLetters: PropTypes.number,
  minDigits: PropTypes.number,
};

PasswordCheckPanel.defaultProps = {
  password: '',
  passwordMinLength: null,
  passwordMaxLength: null,
  minLetters: null,
  minDigits: null,
  minSpecialCharacters: null,
};

export default PasswordCheckPanel;
